<template>
	<div>
		<cl-crud @load="onLoad">
			<!-- 封面 -->
			<template #table-column-cover="{scope}">
				<div class="imgs">
					<img :src="scope.row.cover" alt="" />
				</div>
			</template>
			<!-- 图片列表 -->
			<template #table-column-images="{scope}">
				<div class="imgs" v-if="scope.row.images">
					<a
						v-for="(item, index) in scope.row.images.split(',')"
						:key="index"
						:href="item"
						target="_blank"
						rel="noopener noreferrer"
						>{{ index + 1 + '、' + item }}</a
					>
				</div>
				<div v-else>
					<div>
						无
					</div>
				</div>
			</template>
			<!-- 视频列表 -->
			<template #table-column-videos="{scope}">
				<div class="imgs" v-if="scope.row.videos">
					<video
						v-for="(item, index) in scope.row.videos.split(',')"
						:key="index"
						:src="item"
						target="_blank"
						muted
						:autoplay="false"
						controls="controls"
						rel="noopener noreferrer"
					></video>
				</div>
				<div v-else>
					<div>
						无
					</div>
				</div>
			</template>
			<template #table-column-status="{scope}">
				<span v-if="scope.row.status == 1" style="color:#22DE48">启用</span>
				<span v-if="scope.row.status == 0" style="color:#A2A4BA">禁用</span>
			</template>
			<template #slot-delete="{scope}">
				<del-btn @del="crud.delete(scope.row)"></del-btn>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
// eslint-disable-next-line
import fileList from './components/feilList';
// eslint-disable-next-line
import videoList from './components/videoList';
export default {
	data() {
		return {
			crud: null,
			options: [],
			select: {
				filter: '',
				filters: ''
			}
		};
	},
	components: {
		// eslint-disable-next-line
		fileList,
		// eslint-disable-next-line
		videoList
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			let self = this;
			ctx.service(this.$service.FAQMenagement.video)
				.set('dict', {
					label: {
						add: '添加视频',
						delete: '删除',
						edit: '编辑'
					}
				})
				.set('table', {
					columns: [
						{
							label: '#',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '标题',
							prop: 'title',
							align: 'center',
							emptyText: '无标题',
							'min-width': 150
						},
						{
							label: '封面',
							prop: 'cover',
							align: 'center'
						},
						{
							label: '图片',
							prop: 'images',
							align: 'left',
							'min-width': 150
						},
						{
							label: '视频',
							prop: 'videos',
							align: 'left',
							'min-width': 150
						},
						{
							label: '排序',
							prop: 'level',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '更新时间',
							prop: 'updateTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],

					op: {
						layout: ['edit', 'slot-delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '90px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							prop: 'app',
							label: '平台',
							component: {
								name: 'platform-app',
								data() {
									return {
										options: [],
										value2: ''
									};
								},
								watch: {
									value(val) {
										this.value2 = val;
									}
								},
								props: {
									value: [String]
								},
								async mounted() {
									let platform = await self.$service.platform.app.page();
									this.options = platform.list;
								},
								methods: {
									change(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<div style="width:100px">
											<el-select
												onChange={this.change}
												v-model={this.value2}
												placeholder="请选择">
												{this.options.map(e => {
													return (
														<el-option
															key={e.key}
															label={e.name}
															value={e.key}></el-option>
													);
												})}
											</el-select>
										</div>
									);
								}
							},
							rules: [{ required: true, message: '请选择平台', trigger: 'blur' }]
						},
						{
							prop: 'title',
							label: '标题',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入标题'
								}
							}
						},
						{
							prop: 'shareUrl',
							label: '分享链接',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入分享链接'
								}
							}
						},
						{
							prop: 'type',
							label: '类型',
							component: {
								name: 'el-select',
								options: [
									{
										label: '视频',
										value: 0
									},
									{
										label: '图片',
										value: 1
									}
								]
							}
						},
						{
							prop: 'cover',
							label: '上传封面',
							component: fileList
						},
						{
							prop: 'images',
							label: '上传图片',
							component: fileList
						},
						{
							prop: 'videos',
							label: '上传视频',
							component: videoList
						},
						{
							label: '其他内容',
							prop: 'content',
							span: 24,
							component: {
								name: 'cl-editor-quill',
								props: {
									height: '200px'
								}
							}
						},
						{
							prop: 'level',
							label: '排序',
							span: 8,
							value: 100,
							component: {
								name: 'level-input',
								data() {
									return {
										value2: 0
									};
								},
								props: {
									value: [Number]
								},
								mounted() {
									this.value2 = this.value;
								},
								methods: {
									input(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<div style="display:flex">
											<el-input-number
												controls-position="right"
												min={1}
												max={100000}
												onInput={this.input}
												v-model={this.value2}></el-input-number>
										</div>
									);
								}
							},
							rules: [{ required: true, message: '排序不能为空' }]
						},
						{
							prop: 'status',
							label: '状态',
							span: 24,
							value: 1,
							component: {
								name: 'el-input-number1',
								attrs: {
									'controls-position': 'right',
									min: 1,
									max: 10000
								},
								data() {
									return {
										value2: 1
									};
								},
								props: {
									value: [String, Number]
								},
								methods: {
									change(e) {
										this.$emit('input', e);
									}
								},
								mounted() {
									this.value2 = this.value;
								},
								render() {
									return (
										<el-radio-group
											onChange={this.change}
											v-model={this.value2}>
											<el-radio label={1}>启用</el-radio>
											<el-radio label={0}>禁用</el-radio>
										</el-radio-group>
									);
								}
							},
							rules: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
						}
					]
				})
				.on('refresh', async (params, { next }) => {
					if (params.status === ' ') {
						delete params.status;
					}
					await next(params);
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh({
				order: 'asc',
				sort: 'level'
			});
		}
	}
};
</script>

<style lang="scss">
.reply {
	color: $color-link;
	cursor: pointer;
	display: inline-block;
	margin-left: 10px;
	:hover {
		opacity: 0.7;
	}
}
.problem-box {
	padding: 0 10px 10px 0;
	.problem {
		color: $color-warn;
	}
	.answer {
		color: $color-link;
	}
}
.imgs {
	img {
		width: 100%;
	}
	a {
		display: block;
		@include ellipsis(1);
	}
	video {
		width: 100px;
	}
}
</style>
